* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}



header {
    height: 40px;
    background-color: #333333;
}

.header-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid red;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.header-container-left {
    width: 600px;
    height: 100%;
    /* border: 1px solid red; */
    color: #999;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.header-container-left>span {
    margin: 0 5px;
}

.header-container-right {
    width: 145px;
    height: 100%;
    border: 1px solid red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    font-size: 12px;
}

.header-container-right a {
    color: #999;
    font-size: 12px;
}

nav {
    height: 100px;
}

.nav-container {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container-left {
    width: 50px;
    height: 50px;
    background-color: #000;
    background-image: url(./HTML阶段测试/学生用资源/image/mi-logo.png);
}

.nav-container-conter {
    width: 560px;
    height: 30px;
    /* border: 1px solid red; */
    margin-left: 168px;
    display: flex;
    justify-content: space-between;
}

.nav-container-conter>li {
    color: #666;
    cursor: pointer;
}

.nav-container-right {
    width: 250px;
    height: 50px;
    border: 1px solid #999;
    display: flex;
}

.nav-container-right1 {
    flex: 1;
}

.nav-container-right2 {
    width: 50px;
    height: 50px;
    border-left: 1px solid #999;
    text-align: center;
    line-height: 50px;
    font-weight: bolder;
    color: rgb(88, 88, 88);
    cursor: pointer;
}

.lunbotu {
    height: 365px;
}

.lunbotu-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.lunbotu-container-left {
    width: 230px;
    height: 100%;
    background-color: #2e0c00;
    color: #fff;
    padding: 10px 20px 10px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.lunbotu-container-left>li {
    display: flex;
    justify-content: space-between;
}

.lunbotu-container-left a {
    color: #fff;
    font-size: 14px;
}

.lunbotu-container-right {
    flex: 1;
    border: 1px solid red;
    height: 100%;
    background-image: url(./HTML阶段测试/学生用资源/image/T1vWdTBKDv1RXrhCrK.jpg);
    background-size: contain;
}

.lunboguanggao {
    height: 170px;
    margin-top: 20px;
}

.lunboguanggao-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.lunboguanggao-container-left {
    width: 240px;
    height: 100%;
    /* border: 1px solid red; */
    background-color: #605750;
    display: flex;
    flex-wrap: wrap;
}

.lunboguanggao-container-left>div {
    width: 72px;
    height: 70px;
    border: 1px solid #999;
    margin-left: 5px;
    margin-top: 8px;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-top: 5px;
}

.lunboguanggao-container-left>.lunboguanggao-container-left1,
.lunboguanggao-container-left>.lunboguanggao-container-left4 {
    margin-left: 0px;
}

.lunboguanggao-container-left>.lunboguanggao-container-left1 {
    border-color: transparent #999 #999 transparent;
}

.lunboguanggao-container-left>.lunboguanggao-container-left2 {
    border-top-color: transparent;
}

.lunboguanggao-container-left>.lunboguanggao-container-left3 {
    border-color: transparent transparent #999 #999;
}

.lunboguanggao-container-left>.lunboguanggao-container-left4 {
    border-color: #999 #999 transparent transparent;
}

.lunboguanggao-container-left>.lunboguanggao-container-left5 {
    border-bottom-color: transparent;
}

.lunboguanggao-container-left>.lunboguanggao-container-left6 {
    border-color: #999 transparent transparent #999;
}

.lunboguanggao-container-right {
    flex: 1;
    height: 100%;
    border: 1px solid red;
    display: flex;
    justify-content: flex-end;
}

.lunboguanggao-container-right1 {
    background-image: url(./HTML阶段测试/学生用资源/image/T184E_BQWT1RXrhCrK.jpg);
}

.lunboguanggao-container-right2 {
    background-image: url(./HTML阶段测试/学生用资源/image/T1yvd_BQDT1RXrhCrK.jpg);
}

.lunboguanggao-container-right3 {
    background-image: url(./HTML阶段测试/学生用资源/image/T1mahQBmKT1RXrhCrK.jpg);
}

.lunboguanggao-container-right>div {
    width: 300px;
    height: 100%;
    border: 1px solid blue;
    margin-left: 20px;
}

.mingxingdp {
    height: 30px;
    margin: 15px 0;
}

.mingxingdp-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mingxingdp-container-left {
    width: 160px;
    height: 100%;
    /* border: 1px solid blue; */
    font-size: 20px;
    color: #444244;
    font-weight: 600;
}

.mingxingdp-container-right {
    width: 100px;
    height: 25px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 20px;
}

.mingxingdp-container-right1 {
    width: 50px;
    height: 100%;
    border: 1px solid #666;
}

.mingxingdp-container-right2 {
    width: 50px;
    height: 100%;
    border: 1px solid #666;
    border-left: none;
}

.mingxingtp {
    height: 310px;
}

.mingxingtp-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
}

.mingxingtp-container>div {
    width: 230px;
    height: 100%;
    border-top: 2px solid #fcb280;
    background-color: #fafafa;
    text-align: center;
    font-size: 14px;
}

.mingxingtp-container>div>p {
    color: #565459;
    margin: 10px 0 20px 0;
}

.mingxingtp-container>div>span {
    color: #999;
}

.zhinengyj {
    margin-top: 45px;
    height: 810px;
    background-color: #fafafa;
}

.zhinengyj-container {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    /* border: 1px solid red; */
}

.zhinengyj-container>p {
    padding-top: 10px;
    height: 90px;
    font-size: 24px;
    line-height: 90px;
    /* border: 1px solid blue; */
}

.zhinengyj-container-content {
    height: 640px;
    width: 100%;
    /* border: 1px solid red; */
    display: flex;

}

.zhinengyj-container-content-left {
    width: 240px;
    height: 100%;
    /* border: 1px solid blue; */
}

.zhinengyj-container-content-left>img {
    width: 100%;
    height: 100%;
}

.zhinengyj-container-content-right {
    flex: 1;
    /* border: 1px solid yellow; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.zhinengyj-container-content-right>div {
    width: 225px;
    height: 305px;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
}

.zhinengyj-container-content-right>div>p {
    color: #000;
    margin-top: 5px;
}

.zhinengyj-container-content-right>div>span {
    display: block;
    margin-top: 5px;
    color: #999;
}

.zhinengyj-container-content-right>div>i {
    display: block;
    color: red;
    margin-top: 5px;
    font-style: normal;
}

.foot {
    height: 250px;
}

.foot-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    /* border: 1px solid red; */
}

.foot-container-top {
    height: 80px;
    width: 100%;
    border-bottom: 1px solid #c8c8c8;
    padding: 0 85px;
    display: flex;
    align-items: center;
}

.foot-container-top>li {
    height: 30px;
    width: 220px;
    border-right: 2px solid #999;
    text-align: center;
    line-height: 30px;
}

.foot-container-top>li>a {
    color: #aaa7ba;
}

.foot-container-bottom {
    padding-top: 35px;
    height: 160px;
    width: 100%;
    /* border: 1px solid yellow; */
    display: flex;
}

.foot-container-bottom-left {
    flex: 1;
    /* border: 1px solid red; */
    overflow: hidden;
    padding-left: 100px;
    display: flex;
}


.foot-container-bottom-left>li {
    width: 160px;
    height: 140px;
    /* border: 1px solid red; */
    float: left;
}
.foot-container-bottom-left>li>div {
    font-size: 16px;
    color: #000;
    font-weight: 700;
    margin-bottom: 20px;
    cursor: pointer;
}

.foot-container-bottom-left>li>p {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    cursor: pointer;
}


.foot-container-bottom-right {
    width: 260px;
    height: 125px;
    border-left: 1px solid #bdbdbd;
    text-align: center;
}

.foot-container-bottom-right>div{
    font-size: 20px;
    color: orangered;
    font-weight: 700;
    margin-bottom: 10px;
}

.foot-container-bottom-right>p{
    font-size: 14px;
    font-weight: 600;
}

.foot-container-bottom-right>span{
    width: 120px;
    display: block;
    font-size: 12px;
    margin: 15px auto;
    padding: 5px 5px;
    border: 2px solid orangered;
    color: orangered;
    font-weight: 600;
}

footer {
    height: 80px;
    background-color: #fafafa;
}

.footer-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    /* border: 1px solid red; */
    padding-top: 15px;
    overflow: hidden;
}

.footer-container>div {
    width: 40px;
    height: 40px;
    background-color: #ff6801;
    background-image: url(./HTML阶段测试/学生用资源/image/mi-logo.png);
    background-size: 40px 40px;
    float: left;
}

.footer-container>ul {
    width: 700px;
    margin: 5px 0 0 5px;
    float: left;
    overflow: hidden;
}

.footer-container>ul>li {
    font-size: 12px;
    color: #999;
    float: left;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}

.footer-container>ul>li:not(.footer-last)::after {
    content: "|";
    display: inline-block;
    color: #333;
    font-size: 16px;
}